<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <title>音乐搜索</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <script src="./lib/vue-resource-1.3.4.js"></script>
    <link rel="stylesheet" href="m.css">
</head>
<body>
    <div id="app">
        <div class="nav">
            <ul class="w clearfix">
                <li><a href="home.html">首页</a></li>
                <li><a href="index.html">音乐排行榜</a></li>
                <li><a href="search.html">音乐搜索</a></li>
            </ul>
        </div>
        <div class="search w">
            歌曲名称: <input type="text" v-model='keyowrds' placeholder="搜索关键字" @keyup.enter="so">
            <button type="button" @click="so">搜索</button>
        </div>
        <div class="container w">
            <ul>
                <li v-if="music.url">
                    <div class="play-area">
                        <div class="rotate-img">
                            <img :src="music.pic" alt="" class="album rotate">
                        </div>
                        <div class="cnt-r">
                            <h3>{{music.title}}</h3>
                            <audio autoplay :src="music.url" controls ref="audio"></audio>
                        </div>
                    </div>
                </li>
                <li v-for="item in list" :key="item.sid" >
                        
                        <div class="content">
                            <div class="cover"> 
                                <img :src="item.pic" alt="" class="album">
                            </div>
                            
                            <div class="cnt-r">
                                <h3>{{item.title}}</h3>
                                <div class="pos-r-t btn-play"  @click="play({url:item.url,pic:item.pic,title:item.title})">
                                </div>
                                <p>
                                    歌手: {{item.author}}
                                </p>
                                <p>
                                    来源: {{item.type}}
                                </p>
                                <p class="desc">
                                    <!-- {{item.lrc}} -->
                                </p>
                                <p class="pos-r-b">
                                    <a :href="item.link" target="_blank">网易云音乐</a>
                                </p>
                            </div>
                        </div>
                    </li>
            </ul>
        </div>
    </div>
</body>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            keyowrds:'宋冬野',
            list:[],
            music:{},
            domain:'http://www.duans.top'
        },
        methods:{
            link(id){
                location.href=`detail.html#id=${id}`
            },
            play(obj){ 
                this.music=obj;
            },
            // 音乐搜索
            so(){   
               if(this.keyowrds.trim()==''){
                   alert('请输入搜索关键字!!!');
               }else{
                   this.$http.post(`${this.domain}/freeApi/music.php?act=searchMusic`,{name:this.keyowrds},{emulateJSON:true}).then((res)=>{
                    //    console.log(res);
                       if(res.status==200){
                           this.list=res.body.result
                       }
                       console.log(this.list);
                   });
               }    
            }
        },
        created(){
            //执行默认搜索
            this.so();
        }
       
    });
</script>
</html>